﻿<div>
    <h1>Plan your event:</h1>
    <MRow Justify="JustifyTypes.SpaceAround"
          Align="AlignTypes.Center">
        <MCol Style="width: 350px; flex: 0 1 auto;">
            <h2>Start:</h2>
            <MTimePicker @bind-Value="_start"
                         Max="_end">
            </MTimePicker>
        </MCol>
        <MCol Style="width: 350px; flex: 0 1 auto;">
            <h2>End:</h2>
            <MTimePicker @bind-Value="_end"
                         Min="_start">
            </MTimePicker>
        </MCol>
    </MRow>
</div>

@code {
    private TimeOnly? _start;
    private TimeOnly? _end;
}
